<template>
  <div class="main">
    <router-view></router-view>
    <!-- 底部导航 -->
    <footer ref="footerNav">
      <div class="global-Nav">
        <ul class="Nav-form">
          <router-link tag="li" to="home">
            <span>首页</span>
            <i class="iconfont icon-homepage"></i>
          </router-link>
          <router-link tag="li" to="classify">
            <span>分类</span>
            <i class="iconfont icon-qrcode"></i>
          </router-link>
          <router-link tag="li" to="/search">
            <span>搜索</span>
            <i class="iconfont icon-search"></i>
          </router-link>
          <router-link tag="li" to="/shopping">
            <span>购物车</span>
            <i class="iconfont icon-publishgoods_fill"></i>
          </router-link>
          <router-link tag="li" :to="islogin?'/vip':'/login'">
              <span>会员中心</span>
              <i class="iconfont icon-people"></i>
          </router-link>
        </ul>
      </div>
      <div @click="closeMenu" class="global-Nav-operate">
        <i class="iconfont icon-return"></i>
      </div>
      <div @click="openMenu" class="global-Nav-menu" ref="toggleMenu">
        <span style="font-size:14px">菜单</span>
        <i class="iconfont icon-enter"></i>
      </div>
    </footer>
  </div>
</template>

<script>
import ss from '../Plug/session.js'
export default {
  data(){
    return {
      islogin:false
    }
  },
  mounted(){
    this.islogin=ss.isLogin()
  },
  methods: {
    openMenu() {
      this.$refs.footerNav.className = 'global-nav--current'
      // this.$refs.toggleMenu.innerHTML='<i class="iconfont icon-return"></i>'
    },
    closeMenu() {
      this.$refs.footerNav.className = ''
    }
  }
}
</script>

<style scoped>
.main {
  width: 100%;
  height: 100%;
}
/* 展开底部导航 */
.global-nav--current {
  left: 0;
  transition: all 0.5s linear;
}
.global-nav--current .global-Nav-menu {
  left: 100%;
  transition: all 0.5s linear;
}
/* 底部导航 */
footer {
  transition: all 0.5s linear;
  left: -100%;
  position: fixed;
  bottom: 0;
  height: 57px;
  width: 100%;
  z-index: 1013;
  display: flex;
}

.global-Nav {
  flex-grow: 1;
  background-color: #fff;
}
.global-Nav-operate {
  right: 0;
  width: 20px;
  height: 57px;
  color: #fff;
  line-height: 57px;
  text-align: center;
  position: relative;
  background-color: rgba(153, 153, 153, 0.75);
}
.Nav-form {
  display: flex;
  flex-direction: row;
  height: 100%;
}
.Nav-form > li {
  font-size: 12px;
  color: #999;
  display: flex;
  flex-direction: column-reverse;
  flex-grow: 1;
  text-align: center;
}
.Nav-form > li > i {
  line-height: 27px !important;
  font-size: 30px !important;
}
.Nav-form > li > span {
  line-height: 25px;
}
.global-Nav-menu {
  transition: left 0.5s linear;
  left: 0;
  position: fixed;
  width: 62px;
  height: 57px;
  line-height: 57px;
  color: #fff;
  text-align: center;
  background-color: rgba(153, 153, 153, 0.75);
}
</style>
